<template>
  <div class="main">
    <div class="header">页头+ {{ exam_id }}}</div>
    <div class="exam">
      <div class="exam_name">{{exam?exam.exam_name:""}}</div>
      <div class="description">{{"考试说明：  "}}{{exam?exam.exam_description:""}}</div>
      <div class="answerQuestionsField">
        <div class="question_container">
          <div v-for="(item,index) in exam_questions" :key="index" class="question">
            <answerquestion :question="item" :aq="getAqBody(item.id)" :index="index" ></answerquestion>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-button round type="primary" class="submit" @click="submit">交卷</el-button>
    </div>
    <div class="float_card">
      <el-button round type="primary" @click="save">保存答案</el-button>
    </div>
  </div>
</template>

<script>
import axiosinstance from "@/util/http";
import answerQuestion from "@/view/Home/components/Examination/answerQuestion"

export default {
  name: "Answer",
  data() {
    return {
      exam_id: 1,
      exam: null,
      exam_paper:null,
      exam_questions:[],
      aq_array:[],
    }
  },
  methods: {
    async getExam(){
      let examRes = await axiosinstance.get('/examination/exampaper',{
        params:{
          exam_id: this.exam_id,
          username: this.$store.getters.getuser.username,
        }
      })
      console.log(examRes);
      if(examRes.data.status === 0){
        this.exam = examRes.data.data;
        this.exam_paper = this.exam.examPaper;
        this.exam_questions = this.exam_paper.ExamQuestions;
      }
    },
    getAqBody(id){
      for (let i = 0; i < this.aq_array.length; i++) {
        if(this.aq_array[i].eq_id === id) return this.aq_array[i];
      }
      let aq = {
        eq_id:id,
        answer_body:null
      }
      this.aq_array.push(aq);
      this.aq_array.sort((a,b)=>{
        return a.id - b. id;
      });
      return aq;
    },
    getEfficientAqArray(aq_array){
      let arr = [];
      aq_array.forEach(a=>{
        if(a.answer_body!==null &&a.answer_body!==undefined){
          if(a.answer_body?.length && a.answer_body?.length!==0)
            arr.push(a)
        }
      })
      return arr;
    },
    //获取有效的答案数组
    save(){
      console.log(this.aq_array);
      let aq_array = this.getEfficientAqArray(this.aq_array);
      axiosinstance.post("/examination/saveanswerpaper",{
        exam_id:this.exam_id,
        aq_array:aq_array,
        username:this.$store.getters.getuser.username,
      }).then(res=>{
        console.log(res);
        this.$message.success("保存成功")
      })
    },
    async submit(){
      let aq_array = this.getEfficientAqArray(this.aq_array);
      let saveRes =await axiosinstance.post("/examination/saveanswerpaper",{
        exam_id:this.exam_id,
        aq_array:aq_array,
        username:this.$store.getters.getuser.username,
      }).catch(err =>{
        this.$message.error(String(err));
      })
      if(saveRes.data.status !==0){
        console.log(saveRes)
        this.$message.error("系统繁忙，请稍后再试");
        return -1;
      }
      let submitRes = await axiosinstance.post('/examination/handinpaper',{
        exam_id:this.exam_id,
        username:this.$store.getters.getuser.username,
      })
      console.log(submitRes);
      this.$message.success("交卷成功");
      setTimeout(() =>{
        this.$router.replace('/home');
      },800)

    },


  },
  computed: {},
  components:{
    answerquestion:answerQuestion,
  }

  ,
  async created() {
    this.exam_id = this.$route.query.exam_id;
    let takeExam = await axiosinstance.post('/examination/takeexam', {
      exam_id: this.exam_id,
      username: this.$store.getters.getuser.username,
    }).catch(e => {
      console.log(e);
      this.$router.replace({path: "/home/MineExamination"})
    })
    console.log(takeExam);
    //出现不能继续考试的状况处理
    if (takeExam.data.status !== 0) {
      if (takeExam.data.status === 1) {
        this.$message({
          message: takeExam.data.msg,
          type: "error",
          duration: 2500,
        })
      } else {
        this.$message({
          message: "未知错误",
          type: "error",
          duration: 2500,
        })
      }
      setTimeout(() => {
        this.$router.replace({path: "/home/MineExamination"})
      }, 2500)
    }
    //正常考试初始化过程
    await this.getExam();


  }

}
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;

}
.main {
  width: 100%;
  min-height: 100%;
  text-align: center;
  background-color: #e5e5e5;
  .header {
    height: 3rem;
    background-color: #000000;
    color: #ffffff;
  }
  .exam {
    //min-height: 100% - 25rem;
    //height:100%;
    width: 80%;
    margin:2% auto;
    padding:3rem 0 ;
    background-color: #ffffff;
    border:1px solid #000000;
    .exam_name{
      height:5%;
      color: #020303;
      font-weight:650;
      font-size:2.5rem;
    }
    .description{
      padding:0 15%;
      position: static;
      text-align:start;
      font-size:1rem;
      color: #111111;
    }
    .answerQuestionsField{
        .question_container{
          margin:2rem 3rem;
          .question{
            margin:5rem 3rem 2rem 3rem;
          }
        }
    }
  }

  .footer {
    //position: relative;
    //bottom:0;
    width: 80%;
    margin:2% auto;
    padding:3rem 0 ;
    background-color: #ffffff;
    border:1px solid #000000;
  }
}
.float_card{
  right:0%;
  top:50%;
  position:fixed;
}
</style>